<template>
  <view class="card tn-padding-sm tn-margin-sm">
    <!--   -->
    <PeichuangshuomingPdf style="position: absolute;top: -999999px " ref="PDF" :jsonData="form" @upload="imgUpload"></PeichuangshuomingPdf>
    <inputForm v-model="form" ref="form" :list="list">
      <template #time>
        <view class="tn-flex">
          <tn-input v-model="form.happenYear"/>
          年
          <tn-input v-model="form.happenMonth" inputAlign="center"/>
          月
          <tn-input v-model="form.happenDay" inputAlign="center"/>
          日
        </view>
      </template>
    </inputForm>

    <view class="tn-flex tn-flex-row-center tn-padding-xl">
      <tn-button v-if="$route.query.isClosed === '0'" @click="submit" backgroundColor="tn-bg-blue" style="width: 80%"
                 fontColor="tn-color-white">保存
      </tn-button>
    </view>


    <tn-modal v-model="erweima" :custom="true">
      <view class="custom-modal-content tn-flex tn-flex-direction-column tn-flex-col-center">
        <p style="margin-bottom: 8px;">赔偿说明</p>

        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px;"></canvas>
        <tn-button @click="downloadPDFFn('赔偿说明')" backgroundColor="tn-bg-blue" style="width: 80%;margin-top: 16px;"
                   fontColor="tn-color-white">
          下载
        </tn-button>
      </view>
    </tn-modal>
  </view>
</template>

<script>
import PeichuangshuomingPdf from "./peichuangshuomingPdf.vue";

import inputForm from "@/components/inputForm.vue";
import {
  addAndUpdateDamageExplain, addDocPhoto, addSign,
  getDamageExplainDetail, getSign, updateSign,
} from "@/api/lupeiwenshu";
import TnInput from "@/tuniao-ui/components/tn-input/tn-input.vue";
import config from "@/config";
import UQRCode from '@/node_modules/uqrcodejs/uqrcode.js';
import BupinggushenqingPdf from "@/pages/roadCompensation/bupinggushenqing/bupinggushenqingPdf.vue";
import fujianmixins from "../js/fujianmixins";
import {toast} from "@/utils/common";

export default {
  components: {BupinggushenqingPdf, TnInput, inputForm, PeichuangshuomingPdf},
  mixins: [fujianmixins],
  data() {
    return {
      signList: [],

      form: {
        tzLocat: "",
        time: "",
      },
      list: [
        {
          label: "时间：",
          prop: "time",
          type: "slot"
        }, {
          label: "当事人：",
          prop: "clientName",
        }, {
          label: "车牌：",
          prop: "carNo",
        }, {
          label: "地点：",
          prop: "location",
        }, {
          label: "路产：",
          prop: "goodsDamage",
          type: "textarea",
        }, {
          label: "依据规定：",
          prop: "accordTo",
          type: "textarea",
        }, {
          label: "金额：",
          prop: "payMoney",
        }, {
          label: "交款人：",
          prop: "tzLocat",
          type: "signBoard",
          fn: (item) => {
            this.form.tzLocat = item;
          },
          // }, {
          //   label: "金额大写：",
          //   prop: "payMoneyUppercase",
        }, {
          label: "交款日期：",
          type: "signBoard",
          prop: "time",
          fn: (item) => {
            this.form.time = item;
          },
        }
      ]
    };
  },

  methods: {
    submit() {
      const data = {
        happenYear: this.form.happenYear,
        happenMonth: this.form.happenMonth,
        happenDay: this.form.happenDay,
        clientName: this.form.clientName,
        carNo: this.form.carNo,
        location: this.form.location,
        // payMoneyUppercase: this.form.payMoneyUppercase,
        goodsDamage: this.form.goodsDamage,
        accordTo: this.form.accordTo,
        payMoney: this.form.payMoney,
        // tzLocat: this.form.tzLocat,
        docId: this.$route.query.id
      }
      addAndUpdateDamageExplain(data).then(res => {
        toast(res.msg)

        if (this.signList.length) {
          updateSign({
            doc_photo_id: this.$route.query.id,
            type_num: 4,
            interlocutor1: this.form.tzLocat,
            interlocutor2: this.form.time,
          }).then(res => {
            console.log('res', res)

          })
        } else {
          addSign({
            doc_photo_id: this.$route.query.id,
            type_num: 4,
            interlocutor1: this.form.tzLocat,
            interlocutor2: this.form.time,
          }).then(res => {
            console.log('res', res)
          })
        }

        if (this.form.tzLocat) {
			setTimeout(() => {
				this.$refs.PDF.cusRenderDomNoCodeImg()
			}, 500)
        } else {
          setTimeout(() => {
            uni.navigateBack();
          }, 1500)
        }
      })
    },
    getDetails() {
      getDamageExplainDetail({
        docId: this.$route.query.id
      }).then(res => {
        this.form = {...this.form, ...res.data}
      })
    },
    getSign() {
      getSign({
        doc_photo_id: this.$route.query.id,
        type_num: 4
      }).then(res => {
        if (res.code === 200) {
          this.signList = res.data
          if (res.data.length) {
            this.form.tzLocat = this.jsonData.tzLocat = res.data[0].interlocutor1
            this.form.time = this.jsonData.time = res.data[0].interlocutor2
          }

        } else {
          toast(res.msg)
        }
      })
    },
  },
  mounted() {
    this.getDetails()

    this.getSign()
  },
};
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 3, 72, 0.1);
  border-radius: 8px;
}

.title-text {
  font-size: 22pt;
  font-weight: bold;
  display: block;
  text-align: center;
  font-family: "Microsoft YaHei";
}
</style>
